<template>
    <div>
         <!-- 用户列表组件  面包些导航 -->
         <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">后台首页</el-breadcrumb-item>
            <el-breadcrumb-item >权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
         
          </el-breadcrumb>

          <!-- 卡片视图 -->
          <el-card>
              <el-table :data="rightsList" boder stripe>
<el-table-column type="index"></el-table-column>
<!-- z在接口文档挨个找对应的prop 值 -->
<el-table-column label="权限名称" prop="authName"></el-table-column>
<el-table-column label="路径" prop="path"></el-table-column>
<el-table-column label="权限等级" prop="level">

    <!-- 权限等级需要定义样式 用自定义插槽方式渲染 -->
    <template slot-scope="scope">
     <el-tag v-if="scope.row.level==='0'" type="success">
         权限等级一
     </el-tag>    
     <el-tag type="error" v-else-if="scope.row.level==='1'">
        权限等级二
    </el-tag> 
    <el-tag type="warning" v-else>
        权限等级三
    </el-tag>                                                                                                                               
    </template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
    export default {
        data() {
            return {
                //所有的权限列表
                rightsList: []
            }
        },
        created() {
            {
                //获取所有的权限
                this.getRightsList()
            }
        },
        methods: {
            //获取权限列表
            async getRightsList() {
                const {
                    data: res
                } = await this.$http.get('rights/list')
                if (res.meta.status1 == 200) {
                    return this.$message.error('获取权限列表失败')
                }

                this.rightsList = res.data
                    // console.log(res.data);


            }
        },



    }
</script>

<style lang="less" scoped>

</style>